<template>
  <main style="padding: 24px">
    <AgTable :source="getData" :columns="columns" rowKey="id" expand-on-row-click :bordered="false">
      <!--      <TableColumn colKey="name" title="name"></TableColumn>-->
      <!--      <TableColumn colKey="age" title="age"></TableColumn>-->
      <!--      <TableColumn colKey="gender" title="gender"></TableColumn>-->
      <!--      <template #expandedRow="{ row }">-->
      <!--        <div class="more-detail">-->
      <!--          <p class="title"><b>集群名称:</b></p>-->
      <!--          <p class="content">{{ row.name }}</p>-->
      <!--          <br />-->
      <!--          <p class="title"><b>管理员:</b></p>-->
      <!--          <p class="content">{{ row.age }}</p>-->
      <!--          <br />-->
      <!--          <p class="title"><b>描述:</b></p>-->
      <!--          <p class="content">{{ row.gender }}</p>-->
      <!--        </div>-->
      <!--      </template>-->
    </AgTable>
  </main>
</template>
<script setup lang="tsx">
import AgTable from '@/components/AgTable.vue';
import { ref } from 'vue';
import type { PrimaryTableProps } from '@blueking/tdesign-ui';
import { TableColumn } from '@blueking/tdesign-ui';

const columns: PrimaryTableProps['columns'] = [
  {
    colKey: 'name',
    title: 'name',
    cell: (h, { row }) => {
      return <div>{row.name}</div>
    },
  },
  {
    colKey: 'age',
    title: 'age',
  },
  {
    colKey: 'gender',
    title: 'gender',
  },
]

const getData = async () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        count: 11,
        results: [
          { id: 1, name: 'John Doe', age: 38 },
          { id: 2, name: 'Alice Smith', age: 25 },
          { id: 3, name: 'Bob Johnson', age: 52 },
          { id: 4, name: 'Emma Brown', age: 29 },
          { id: 5, name: 'Mike Lee', age: 44 },
          { id: 6, name: 'John Smith', age: 33 },
          { id: 7, name: 'Alice Johnson', age: 47 },
          { id: 8, name: 'Bob Brown', age: 21 },
          { id: 9, name: 'Emma Lee', age: 59 },
          { id: 10, name: 'Mike Doe', age: 31 },
          { id: 11, name: 'John Brown', age: 27 },
        ],
      })
    }, 1000)
  })
}
</script>

